<!--
 * @Author: cest
 * @Date: 2022-07-17 09:19:07
 * @LastEditTime: 2022-07-17 11:02:09
 * @LastEditors: cest
 * @FilePath: /uni-app-cli-preset/src/pages/color-ui/icon/index.vue
 * @Description: 编辑描述内容
-->
<template lang="pug">
.icon
  cu-custom(bg-color="bg-gradual-blue" :is-back="true")
    block(slot="backText")
      | 返回
    block(slot="content")
      | 图标
  view.cu-bar.bg-white.search.fixed(:style="[{top:CustomBar + 'px'}]")
    view.search-form.round
      text.cuIcon-search
      input(type="text" placeholder="搜索cuIcon" confirm-type="search" @input="searchIcon")
  view.cu-list.grid.col-2
    block(v-for="(item,index) in CuIconSortByNameAsc" :key="index")
      view.cu-item(v-if="item.isShow" @click="copyTextEventHandler('cuIcon-' + item.name)")
        text.lg.text-gray(:class="'cuIcon-' + item.name")
        text(selectable="true") cuIcon-{{ item.name }}
</template>

<script>
export default {
  components: {},
  data: () => ({
    cuIcon: [
      {
        name: 'appreciate',
        isShow: true
      },
      {
        name: 'check',
        isShow: true
      },
      {
        name: 'close',
        isShow: true
      },
      {
        name: 'edit',
        isShow: true
      },
      {
        name: 'emoji',
        isShow: true
      },
      {
        name: 'favorfill',
        isShow: true
      },
      {
        name: 'favor',
        isShow: true
      },
      {
        name: 'loading',
        isShow: true
      },
      {
        name: 'locationfill',
        isShow: true
      },
      {
        name: 'location',
        isShow: true
      },
      {
        name: 'phone',
        isShow: true
      },
      {
        name: 'roundcheckfill',
        isShow: true
      },
      {
        name: 'roundcheck',
        isShow: true
      },
      {
        name: 'roundclosefill',
        isShow: true
      },
      {
        name: 'roundclose',
        isShow: true
      },
      {
        name: 'roundrightfill',
        isShow: true
      },
      {
        name: 'roundright',
        isShow: true
      },
      {
        name: 'search',
        isShow: true
      },
      {
        name: 'taxi',
        isShow: true
      },
      {
        name: 'timefill',
        isShow: true
      },
      {
        name: 'time',
        isShow: true
      },
      {
        name: 'unfold',
        isShow: true
      },
      {
        name: 'warnfill',
        isShow: true
      },
      {
        name: 'warn',
        isShow: true
      },
      {
        name: 'camerafill',
        isShow: true
      },
      {
        name: 'camera',
        isShow: true
      },
      {
        name: 'commentfill',
        isShow: true
      },
      {
        name: 'comment',
        isShow: true
      },
      {
        name: 'likefill',
        isShow: true
      },
      {
        name: 'like',
        isShow: true
      },
      {
        name: 'notificationfill',
        isShow: true
      },
      {
        name: 'notification',
        isShow: true
      },
      {
        name: 'order',
        isShow: true
      },
      {
        name: 'samefill',
        isShow: true
      },
      {
        name: 'same',
        isShow: true
      },
      {
        name: 'deliver',
        isShow: true
      },
      {
        name: 'evaluate',
        isShow: true
      },
      {
        name: 'pay',
        isShow: true
      },
      {
        name: 'send',
        isShow: true
      },
      {
        name: 'shop',
        isShow: true
      },
      {
        name: 'ticket',
        isShow: true
      },
      {
        name: 'back',
        isShow: true
      },
      {
        name: 'cascades',
        isShow: true
      },
      {
        name: 'discover',
        isShow: true
      },
      {
        name: 'list',
        isShow: true
      },
      {
        name: 'more',
        isShow: true
      },
      {
        name: 'scan',
        isShow: true
      },
      {
        name: 'settings',
        isShow: true
      },
      {
        name: 'questionfill',
        isShow: true
      },
      {
        name: 'question',
        isShow: true
      },
      {
        name: 'shopfill',
        isShow: true
      },
      {
        name: 'form',
        isShow: true
      },
      {
        name: 'pic',
        isShow: true
      },
      {
        name: 'filter',
        isShow: true
      },
      {
        name: 'footprint',
        isShow: true
      },
      {
        name: 'top',
        isShow: true
      },
      {
        name: 'pulldown',
        isShow: true
      },
      {
        name: 'pullup',
        isShow: true
      },
      {
        name: 'right',
        isShow: true
      },
      {
        name: 'refresh',
        isShow: true
      },
      {
        name: 'moreandroid',
        isShow: true
      },
      {
        name: 'deletefill',
        isShow: true
      },
      {
        name: 'refund',
        isShow: true
      },
      {
        name: 'cart',
        isShow: true
      },
      {
        name: 'qrcode',
        isShow: true
      },
      {
        name: 'remind',
        isShow: true
      },
      {
        name: 'delete',
        isShow: true
      },
      {
        name: 'profile',
        isShow: true
      },
      {
        name: 'home',
        isShow: true
      },
      {
        name: 'cartfill',
        isShow: true
      },
      {
        name: 'discoverfill',
        isShow: true
      },
      {
        name: 'homefill',
        isShow: true
      },
      {
        name: 'message',
        isShow: true
      },
      {
        name: 'addressbook',
        isShow: true
      },
      {
        name: 'link',
        isShow: true
      },
      {
        name: 'lock',
        isShow: true
      },
      {
        name: 'unlock',
        isShow: true
      },
      {
        name: 'vip',
        isShow: true
      },
      {
        name: 'weibo',
        isShow: true
      },
      {
        name: 'activity',
        isShow: true
      },
      {
        name: 'friendaddfill',
        isShow: true
      },
      {
        name: 'friendadd',
        isShow: true
      },
      {
        name: 'friendfamous',
        isShow: true
      },
      {
        name: 'friend',
        isShow: true
      },
      {
        name: 'goods',
        isShow: true
      },
      {
        name: 'selection',
        isShow: true
      },
      {
        name: 'explore',
        isShow: true
      },
      {
        name: 'present',
        isShow: true
      },
      {
        name: 'squarecheckfill',
        isShow: true
      },
      {
        name: 'square',
        isShow: true
      },
      {
        name: 'squarecheck',
        isShow: true
      },
      {
        name: 'round',
        isShow: true
      },
      {
        name: 'roundaddfill',
        isShow: true
      },
      {
        name: 'roundadd',
        isShow: true
      },
      {
        name: 'add',
        isShow: true
      },
      {
        name: 'notificationforbidfill',
        isShow: true
      },
      {
        name: 'explorefill',
        isShow: true
      },
      {
        name: 'fold',
        isShow: true
      },
      {
        name: 'game',
        isShow: true
      },
      {
        name: 'redpacket',
        isShow: true
      },
      {
        name: 'selectionfill',
        isShow: true
      },
      {
        name: 'similar',
        isShow: true
      },
      {
        name: 'appreciatefill',
        isShow: true
      },
      {
        name: 'infofill',
        isShow: true
      },
      {
        name: 'info',
        isShow: true
      },
      {
        name: 'forwardfill',
        isShow: true
      },
      {
        name: 'forward',
        isShow: true
      },
      {
        name: 'rechargefill',
        isShow: true
      },
      {
        name: 'recharge',
        isShow: true
      },
      {
        name: 'vipcard',
        isShow: true
      },
      {
        name: 'voice',
        isShow: true
      },
      {
        name: 'voicefill',
        isShow: true
      },
      {
        name: 'friendfavor',
        isShow: true
      },
      {
        name: 'wifi',
        isShow: true
      },
      {
        name: 'share',
        isShow: true
      },
      {
        name: 'wefill',
        isShow: true
      },
      {
        name: 'we',
        isShow: true
      },
      {
        name: 'lightauto',
        isShow: true
      },
      {
        name: 'lightforbid',
        isShow: true
      },
      {
        name: 'lightfill',
        isShow: true
      },
      {
        name: 'camerarotate',
        isShow: true
      },
      {
        name: 'light',
        isShow: true
      },
      {
        name: 'barcode',
        isShow: true
      },
      {
        name: 'flashlightclose',
        isShow: true
      },
      {
        name: 'flashlightopen',
        isShow: true
      },
      {
        name: 'searchlist',
        isShow: true
      },
      {
        name: 'service',
        isShow: true
      },
      {
        name: 'sort',
        isShow: true
      },
      {
        name: 'down',
        isShow: true
      },
      {
        name: 'mobile',
        isShow: true
      },
      {
        name: 'mobilefill',
        isShow: true
      },
      {
        name: 'copy',
        isShow: true
      },
      {
        name: 'countdownfill',
        isShow: true
      },
      {
        name: 'countdown',
        isShow: true
      },
      {
        name: 'noticefill',
        isShow: true
      },
      {
        name: 'notice',
        isShow: true
      },
      {
        name: 'upstagefill',
        isShow: true
      },
      {
        name: 'upstage',
        isShow: true
      },
      {
        name: 'babyfill',
        isShow: true
      },
      {
        name: 'baby',
        isShow: true
      },
      {
        name: 'brandfill',
        isShow: true
      },
      {
        name: 'brand',
        isShow: true
      },
      {
        name: 'choicenessfill',
        isShow: true
      },
      {
        name: 'choiceness',
        isShow: true
      },
      {
        name: 'clothesfill',
        isShow: true
      },
      {
        name: 'clothes',
        isShow: true
      },
      {
        name: 'creativefill',
        isShow: true
      },
      {
        name: 'creative',
        isShow: true
      },
      {
        name: 'female',
        isShow: true
      },
      {
        name: 'keyboard',
        isShow: true
      },
      {
        name: 'male',
        isShow: true
      },
      {
        name: 'newfill',
        isShow: true
      },
      {
        name: 'new',
        isShow: true
      },
      {
        name: 'pullleft',
        isShow: true
      },
      {
        name: 'pullright',
        isShow: true
      },
      {
        name: 'rankfill',
        isShow: true
      },
      {
        name: 'rank',
        isShow: true
      },
      {
        name: 'bad',
        isShow: true
      },
      {
        name: 'cameraadd',
        isShow: true
      },
      {
        name: 'focus',
        isShow: true
      },
      {
        name: 'friendfill',
        isShow: true
      },
      {
        name: 'cameraaddfill',
        isShow: true
      },
      {
        name: 'apps',
        isShow: true
      },
      {
        name: 'paintfill',
        isShow: true
      },
      {
        name: 'paint',
        isShow: true
      },
      {
        name: 'picfill',
        isShow: true
      },
      {
        name: 'refresharrow',
        isShow: true
      },
      {
        name: 'colorlens',
        isShow: true
      },
      {
        name: 'markfill',
        isShow: true
      },
      {
        name: 'mark',
        isShow: true
      },
      {
        name: 'presentfill',
        isShow: true
      },
      {
        name: 'repeal',
        isShow: true
      },
      {
        name: 'album',
        isShow: true
      },
      {
        name: 'peoplefill',
        isShow: true
      },
      {
        name: 'people',
        isShow: true
      },
      {
        name: 'servicefill',
        isShow: true
      },
      {
        name: 'repair',
        isShow: true
      },
      {
        name: 'file',
        isShow: true
      },
      {
        name: 'repairfill',
        isShow: true
      },
      {
        name: 'taoxiaopu',
        isShow: true
      },
      {
        name: 'weixin',
        isShow: true
      },
      {
        name: 'attentionfill',
        isShow: true
      },
      {
        name: 'attention',
        isShow: true
      },
      {
        name: 'commandfill',
        isShow: true
      },
      {
        name: 'command',
        isShow: true
      },
      {
        name: 'communityfill',
        isShow: true
      },
      {
        name: 'community',
        isShow: true
      },
      {
        name: 'read',
        isShow: true
      },
      {
        name: 'calendar',
        isShow: true
      },
      {
        name: 'cut',
        isShow: true
      },
      {
        name: 'magic',
        isShow: true
      },
      {
        name: 'backwardfill',
        isShow: true
      },
      {
        name: 'playfill',
        isShow: true
      },
      {
        name: 'stop',
        isShow: true
      },
      {
        name: 'tagfill',
        isShow: true
      },
      {
        name: 'tag',
        isShow: true
      },
      {
        name: 'group',
        isShow: true
      },
      {
        name: 'all',
        isShow: true
      },
      {
        name: 'backdelete',
        isShow: true
      },
      {
        name: 'hotfill',
        isShow: true
      },
      {
        name: 'hot',
        isShow: true
      },
      {
        name: 'post',
        isShow: true
      },
      {
        name: 'radiobox',
        isShow: true
      },
      {
        name: 'rounddown',
        isShow: true
      },
      {
        name: 'upload',
        isShow: true
      },
      {
        name: 'writefill',
        isShow: true
      },
      {
        name: 'write',
        isShow: true
      },
      {
        name: 'radioboxfill',
        isShow: true
      },
      {
        name: 'punch',
        isShow: true
      },
      {
        name: 'shake',
        isShow: true
      },
      {
        name: 'move',
        isShow: true
      },
      {
        name: 'safe',
        isShow: true
      },
      {
        name: 'activityfill',
        isShow: true
      },
      {
        name: 'crownfill',
        isShow: true
      },
      {
        name: 'crown',
        isShow: true
      },
      {
        name: 'goodsfill',
        isShow: true
      },
      {
        name: 'messagefill',
        isShow: true
      },
      {
        name: 'profilefill',
        isShow: true
      },
      {
        name: 'sound',
        isShow: true
      },
      {
        name: 'sponsorfill',
        isShow: true
      },
      {
        name: 'sponsor',
        isShow: true
      },
      {
        name: 'upblock',
        isShow: true
      },
      {
        name: 'weblock',
        isShow: true
      },
      {
        name: 'weunblock',
        isShow: true
      },
      {
        name: 'my',
        isShow: true
      },
      {
        name: 'myfill',
        isShow: true
      },
      {
        name: 'emojifill',
        isShow: true
      },
      {
        name: 'emojiflashfill',
        isShow: true
      },
      {
        name: 'flashbuyfill',
        isShow: true
      },
      {
        name: 'text',
        isShow: true
      },
      {
        name: 'goodsfavor',
        isShow: true
      },
      {
        name: 'musicfill',
        isShow: true
      },
      {
        name: 'musicforbidfill',
        isShow: true
      },
      {
        name: 'card',
        isShow: true
      },
      {
        name: 'triangledownfill',
        isShow: true
      },
      {
        name: 'triangleupfill',
        isShow: true
      },
      {
        name: 'roundleftfill-copy',
        isShow: true
      },
      {
        name: 'font',
        isShow: true
      },
      {
        name: 'title',
        isShow: true
      },
      {
        name: 'recordfill',
        isShow: true
      },
      {
        name: 'record',
        isShow: true
      },
      {
        name: 'cardboardfill',
        isShow: true
      },
      {
        name: 'cardboard',
        isShow: true
      },
      {
        name: 'formfill',
        isShow: true
      },
      {
        name: 'coin',
        isShow: true
      },
      {
        name: 'cardboardforbid',
        isShow: true
      },
      {
        name: 'circlefill',
        isShow: true
      },
      {
        name: 'circle',
        isShow: true
      },
      {
        name: 'attentionforbid',
        isShow: true
      },
      {
        name: 'attentionforbidfill',
        isShow: true
      },
      {
        name: 'attentionfavorfill',
        isShow: true
      },
      {
        name: 'attentionfavor',
        isShow: true
      },
      {
        name: 'titles',
        isShow: true
      },
      {
        name: 'icloading',
        isShow: true
      },
      {
        name: 'full',
        isShow: true
      },
      {
        name: 'mail',
        isShow: true
      },
      {
        name: 'peoplelist',
        isShow: true
      },
      {
        name: 'goodsnewfill',
        isShow: true
      },
      {
        name: 'goodsnew',
        isShow: true
      },
      {
        name: 'medalfill',
        isShow: true
      },
      {
        name: 'medal',
        isShow: true
      },
      {
        name: 'newsfill',
        isShow: true
      },
      {
        name: 'newshotfill',
        isShow: true
      },
      {
        name: 'newshot',
        isShow: true
      },
      {
        name: 'news',
        isShow: true
      },
      {
        name: 'videofill',
        isShow: true
      },
      {
        name: 'video',
        isShow: true
      },
      {
        name: 'exit',
        isShow: true
      },
      {
        name: 'skinfill',
        isShow: true
      },
      {
        name: 'skin',
        isShow: true
      },
      {
        name: 'moneybagfill',
        isShow: true
      },
      {
        name: 'usefullfill',
        isShow: true
      },
      {
        name: 'usefull',
        isShow: true
      },
      {
        name: 'moneybag',
        isShow: true
      },
      {
        name: 'redpacket_fill',
        isShow: true
      },
      {
        name: 'subscription',
        isShow: true
      },
      {
        name: 'loading1',
        isShow: true
      },
      {
        name: 'github',
        isShow: true
      },
      {
        name: 'global',
        isShow: true
      },
      {
        name: 'settingsfill',
        isShow: true
      },
      {
        name: 'back_android',
        isShow: true
      },
      {
        name: 'expressman',
        isShow: true
      },
      {
        name: 'evaluate_fill',
        isShow: true
      },
      {
        name: 'group_fill',
        isShow: true
      },
      {
        name: 'play_forward_fill',
        isShow: true
      },
      {
        name: 'deliver_fill',
        isShow: true
      },
      {
        name: 'notice_forbid_fill',
        isShow: true
      },
      {
        name: 'fork',
        isShow: true
      },
      {
        name: 'pick',
        isShow: true
      },
      {
        name: 'wenzi',
        isShow: true
      },
      {
        name: 'ellipse',
        isShow: true
      },
      {
        name: 'qr_code',
        isShow: true
      },
      {
        name: 'dianhua',
        isShow: true
      },
      {
        name: 'cuIcon',
        isShow: true
      },
      {
        name: 'loading2',
        isShow: true
      },
      {
        name: 'btn',
        isShow: true
      }
    ]
  }),
  computed: {
    CustomBar() {
      return this.$CustomStatusBarHeight
    },
    CuIconSortByNameAsc() {
      return [].concat(this.cuIcon).sort(function (a, b) {
        if (a.name < b.name) {
          return -1
        } else if (a.name === b.name) {
          return 0
        } else {
          return 1
        }
      })
    }
  },
  methods: {
    searchIcon(e) {
      const key = e.detail.value.toLowerCase()
      const list = this.cuIcon
      for (let i = 0; i < list.length; i++) {
        const a = key
        const b = list[i].name.toLowerCase()
        if (b.search(a) !== -1) {
          list[i].isShow = true
        } else {
          list[i].isShow = false
        }
      }
      this.cuIcon = list
    },
    copyTextEventHandler(value) {
      const self = this
      uni.setClipboardData({
        data: value,
        success: function (res) {
          console.log('success', res)
          self.$u.toast('复制成功!')
        },
        fail(res) {
          console.log('fail', res)
          self.$u.toast('复制失败!')
        },
        complete(res) {
          console.log('complete', res)
        }
      })
      // this.$copyText(value).then(
      //   function (e) {
      //     console.log('copy arguments e:', e)
      //     self.$u.toast('复制成功!')
      //   },
      //   function (e) {
      //     console.log('copy arguments e:', e)
      //     self.$u.toast('复制失败!')
      //   }
      // )
    }
  },
  watch: {},

  // 页面周期函数--监听页面加载
  onLoad() {},
  // 页面周期函数--监听页面初次渲染完成
  onReady() {},
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() {},
  // 页面周期函数--监听页面隐藏
  onHide() {},
  // 页面周期函数--监听页面卸载
  onUnload() {}
  // 页面处理函数--监听用户下拉动作
  // onPullDownRefresh() { uni.stopPullDownRefresh(); },
  // 页面处理函数--监听用户上拉触底
  // onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  // onPageScroll(event) {},
  // 页面处理函数--用户点击右上角分享
  // onShareAppMessage(options) {},
}
</script>

<style lang="scss" scoped>
// 内置图标
@import '@/util/color-ui/scss/modules/icon.scss';
// 列表
@import '@/util/color-ui//scss/modules/cu-list.scss';

.icon {
  padding-top: 50px;
}
</style>
